/*common********************************************************************/
.j-btn,.j-input,.j-input-w,.j-select,.j-radio,.j-checkbox,.j-switch,.j-date,.j-color,.j-slider{
    margin: 3px;
    display: inline-block;
    vertical-align: middle;
    font-family:'Microsoft Yahei',"Open Sans",Arial,sans-serif;
}
/* .j-option{visibility:hidden} */
/*ROW AND COL********************************************************************/

.j-row:after{
    clear:both;
}
.j-row:before, .j-row:after{
    display: table;
    content: " ";
}
.j-col{
    float: left;
}
.j-row.j-row-m > .j-col{margin: 5px 0.5%}
.j-col.c1{width:4.166666666666667%;}
.j-col.c2{width:8.333333333333334%;}
.j-col.c3{width:12.5%;}
.j-col.c4{width:16.666666666666668%;}
.j-col.c5{width:20.833333333333336%;}
.j-col.c6{width:25%;}
.j-col.c7{width:29.166666666666668%;}
.j-col.c8{width:33.333333333333336%;}
.j-col.c9{width:37.5%;}
.j-col.c10{width:41.66666666666667%;}
.j-col.c11{width:45.833333333333336%;}
.j-col.c12{width:50%;}
.j-col.c13{width:54.16666666666667%;}
.j-col.c14{width:58.333333333333336%;}
.j-col.c15{width:62.50000000000001%;}
.j-col.c16{width:66.66666666666667%;}
.j-col.c17{width:70.83333333333334%;}
.j-col.c18{width:75%;}
.j-col.c19{width:79.16666666666667%;}
.j-col.c20{width:83.33333333333334%;}
.j-col.c21{width:87.5%;}
.j-col.c22{width:91.66666666666667%;}
.j-col.c23{width:95.83333333333334%;}
.j-col.c24{width:100%;}

.j-row.j-row-m > .j-col.c1{width:3.166666666666667%;}
.j-row.j-row-m > .j-col.c2{width:7.333333333333334%;}
.j-row.j-row-m > .j-col.c3{width:11.5%;}
.j-row.j-row-m > .j-col.c4{width:15.666666666666668%;}
.j-row.j-row-m > .j-col.c5{width:19.833333333333336%;}
.j-row.j-row-m > .j-col.c6{width:24%;}
.j-row.j-row-m > .j-col.c7{width:28.166666666666668%;}
.j-row.j-row-m > .j-col.c8{width:32.333333333333336%;}
.j-row.j-row-m > .j-col.c9{width:36.5%;}
.j-row.j-row-m > .j-col.c10{width:40.66666666666667%;}
.j-row.j-row-m > .j-col.c11{width:44.833333333333336%;}
.j-row.j-row-m > .j-col.c12{width:49%;}
.j-row.j-row-m > .j-col.c13{width:53.16666666666667%;}
.j-row.j-row-m > .j-col.c14{width:57.333333333333336%;}
.j-row.j-row-m > .j-col.c15{width:61.50000000000001%;}
.j-row.j-row-m > .j-col.c16{width:65.66666666666667%;}
.j-row.j-row-m > .j-col.c17{width:69.83333333333334%;}
.j-row.j-row-m > .j-col.c18{width:74%;}
.j-row.j-row-m > .j-col.c19{width:78.16666666666667%;}
.j-row.j-row-m > .j-col.c20{width:82.33333333333334%;}
.j-row.j-row-m > .j-col.c21{width:86.5%;}
.j-row.j-row-m > .j-col.c22{width:90.66666666666667%;}
.j-row.j-row-m > .j-col.c23{width:94.83333333333334%;}
.j-row.j-row-m > .j-col.c24{width:99%;}
/*ROW AND COL END********************************************************************/

/*btn********************************************************************/
.j-btn{
    background-color: #1da1ff;
    color: #fff;
    height: 30px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 2px;
    outline: none;
    border: none;
    font-family: "Microsoft Yahei";
    transition: background-color .3s ease;
    -webkit-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
    -moz-transition: background-color .3s ease;
    -ms-transition: background-color .3s ease;
}
.j-btn .j-icon{
	margin-right:3px;
}
.j-btn.j-icon-right .j-icon{
	margin-right:0;
	margin-left:3px;
}
.j-btn.xs{
    height: 23px;
    padding: 0 5px;
    line-height: 21px;
    font-size: 12px;
}
.j-btn.xs .j-icon{
    font-size: 12px;
	margin-right:1px;
}
.j-btn.s{
    height: 26px;
    padding: 0 6px;
    line-height: 24px;
    font-size: 14px;
}
.j-btn.s .j-icon{
    font-size: 14px;
	margin-right:2px;
}
.j-btn.l{
    height: 35px;
    padding: 0 14px;
    line-height: 33px;
    font-size: 18px;
}
.j-btn.l .j-icon{
    font-size: 18px;
	margin-right:4px;
}
.j-btn.xl{
    height: 40px;
    padding: 0 16px;
    line-height: 38px;
    font-size: 22px;
}
.j-btn.xl .j-icon{
    font-size: 22px;
	margin-right:5px;
}
.j-btn.j-icon-mn .j-icon,.j-icon.j-icon-mn{
	margin-right:0;
}

.j-btn:hover{background-color: #5fbcff}
.j-btn:active{background-color: #70c4ff}
.j-btn.success{background-color: #2ac32f}
.j-btn.success:hover{background-color: #27d12c}
.j-btn.success:active{background-color: #2fec34}
.j-btn.warn{background-color: #dfa02b}
.j-btn.warn:hover{background-color: #eaa82c}
.j-btn.warn:active{background-color: #f2af32}
.j-btn.info{background-color: #9e9e9e}
.j-btn.info:hover{background-color: #b6b6b6}
.j-btn.info:active{background-color: #c7c7c7}
.j-btn.danger{background-color: #dc5454}
.j-btn.danger:hover{background-color: #f45d5d}
.j-btn.danger:active{background-color: #ff8383}


.j-input,.j-select,.j-date{
    font-size: 16px;
    border: 1px solid #aaa;
    background-color:#fff;
    width: 150px;
    padding-left: 5px;
    height: 30px;
    color: #222;
    outline: none;
    border-radius: 2px;
    transition: border-color .3s ease;
    -webkit-transition: border-color .3s ease;
    -o-transition: border-color .3s ease;
    -moz-transition: border-color .3s ease;
    -ms-transition: border-color .3s ease;
}
.j-input-w{
    position: relative;
    width: auto;
    height: auto;
    margin: 3px;
    display: inline-block;
    line-height: 26px;
}
.j-input-w .j-icon-w{
    position: absolute;
    display: inline-block;
    padding:0 8px;
    background-color: #ccc;
    border-right: 1px solid #eee;
    top:1px;
    bottom:1px;
    left: 1px;
    font-size: 15px;
    text-align: center;
    color: #999;
    border-radius: 2px 0 0 2px;
    transition: color .3s ease;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
}
.j-input-w.xs{line-height: 19px;}
.j-input-w.s{line-height: 22px;}
.j-input-w.l{line-height: 31px;}
.j-input-w.xl{line-height: 36px;}
.j-input-w.normal .j-icon-w{color: #2c88ca;}
.j-input-w.success .j-icon-w{color: #2bcd2f;}
.j-input-w.warn .j-icon-w{color: #d1972a;}
.j-input-w.danger .j-icon-w{color: #dc5454;}
.j-input-w .j-icon{
}
.j-input-w .j-input{margin: 0;}
/* .j-input-w .j-input.j-icon-left{padding-left: 35px;} */
.j-input-w .j-input:focus + .j-icon-w{color: #666;}
.j-input-w.normal .j-input:focus + .j-icon-w{color: #0e4f7e;}
.j-input-w.normal .j-icon-w{background-color:#b8e1ff}

.j-input-w.success .j-input:focus + .j-icon-w{color: #09920e;}
.j-input-w.success .j-icon-w{background-color:#cdffcf}

.j-input-w.warn .j-input:focus + .j-icon-w{color: #885f13;}
.j-input-w.warn .j-icon-w{background-color:#ffe7b9}

.j-input-w.danger .j-input:focus + .j-icon-w{color: #973838;}
.j-input-w.danger .j-icon-w{background-color:#ffcccc}
/* .j-input.j-icon-right{
    padding-right: 35px;
    padding-left: 5px;
} */
.j-input-w .j-input.j-icon-right + .j-icon-w{
    right:1px;
    left: initial;
    border-right: none;
    border-left: 1px solid #eee;
    border-radius: 0 2px 2px 0;
}
textarea.j-input{
}
.j-input:focus{border: 1px solid #777;}
.j-input.normal{border-color: #2c88ca}
.j-input.normal:focus{border-color: #0e4f7e}
.j-input.success{border-color: #2bcd2f}
.j-input.success:focus{border-color: #09920e}
.j-input.warn{border-color: #d1972a}
.j-input.warn:focus{border-color: #885f13}
.j-input.danger{border-color: #dc5454}
.j-input.danger:focus{border-color: #c54d4d}
.j-input.xs,.j-select.xs{
    font-size: 12px;
    height: 23px;
    width: 100px;
    padding-left: 2px;
}
.j-input-w .j-input{width:190px}
.j-input-w .j-input.xs{width:140px}
.j-input.s,.j-select.s{
    font-size: 14px;
    height: 26px;
    width: 120px;
    padding-left: 4px;
}
.j-input-w .j-input.s{width:160px}
.j-input.l,.j-select.l{
    font-size: 18px;
    height: 35px;
    width: 170px;
    padding-left: 7px;
}
.j-input-w .j-input.l{width:210px}
.j-input.xl,.j-select.xl{
    font-size: 22px;
    height: 40px;
    width: 200px;
    padding-left: 8px;
}
.j-input-w .j-input.xl{width:240px}
.j-input[disabled],.j-select[disabled],.j-btn[disabled],.j-switch[disabled],.j-date[disabled],.j-color[disabled]{
    cursor:no-drop!important;
    background-color: #ddd!important;
    color: #999!important;
}
.j-select.xs{line-height: 20px;}
.j-select.xs .j-icon{top:1px;}
.j-select.xs .j-option-w.s-open{top:23px;}
.j-select.s{line-height: 23px;}
.j-select.s .j-icon{top:2px;}
.j-select.s .j-option-w.s-open{top:26px;}
.j-select.l{line-height: 32px;}
.j-select.l .j-icon{top:7px;}
.j-select.l .j-option-w.s-open{top:35px;}
.j-select.xl{line-height: 37px;}
.j-select.xl .j-icon{top:10px;}
.j-select.xl .j-option-w.s-open{top:40px;}
.j-select{
    cursor: pointer;
    padding: 0;
    padding-left: 0!important;
    line-height: 30px;
    position: relative;
    background-color:#fff;
}

.j-select-vw{
    position: relative;
    width: 100%;
    height:100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.j-select-vw .j-icon{
    position: absolute;
    right: 7px;
    top: 5px;
    font-size: 20px;
    transform: rotate(0deg);
    transition: transform .3s ease;
    -webkit-transition: -webkit-transform .3s ease;
    -o-transition: -o-transform .3s ease;
    -moz-transition: -moz-transform .3s ease;
    -ms-transition: -ms-transform .3s ease;
}
.j-select-vw .j-icon.s-open{
    transform: rotate(-180deg);
}
.j-select:hover{
    border: 1px solid #bbb;
}
.j-option-w{
    position: absolute;
    width: 100%;
    top: 0px;
    opacity: 0;
    text-align: center;
    border: 1px solid #aaa;
    border-radius: 3px;
    height:0;
    overflow: hidden;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    background-color:#fff;
    z-index:1;
}
.j-option-w.s-open{
    top: 30px;
    opacity: 1;
    height:auto;    
    max-height: 276px;
    overflow-y: auto;
}
.j-option-w .j-option{
    border-bottom: 1px solid #ccc;
}
.j-option-w .j-option.c-disabled{
    color: #aaa;
}
.j-option-w .j-option:hover{
    background-color:#eee;
}
.j-option-w .j-option:last-child{
    border: none
}
.j-option .j-icon{
    margin-right: 2px;
}
.j-option{
    white-space: nowrap;
}

/*MESSAGE*************************************************************/
.j-msg-w{
    position: fixed;
    background-color: #2ac32f;
    color: #fff;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    border-radius: 3px;
    padding: 10px 35px;
    font-size: 15px!important;
    top:-20px;
    opacity: 0;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    z-index:30;
}
.j-msg-w.warn{
    background-color: #dfa02b;
}
.j-msg-w.error{
    background-color: #dc5454;
}
.j-msg-w.info{
    background-color: #9e9e9e;
}
.j-msg-w.msg-open{
    top: 10px;
    opacity: .95;
}
.j-msg-i,.j-msg-close{
    position: absolute;
    font-size: 20px!important;
    top: 50%;
    margin-top: -10px;
}
.j-msg-i{
    left: 10px;
}
.j-msg-close{
    right:10px;
    cursor: pointer;
    opacity: 1;
}
.j-msg-close:hover{
    opacity: 0.8;
}

/*RADIO************************************************************************************/
.j-radio,.j-checkbox{
    display: inline-block;
    cursor: pointer;
    margin: 3px;
    height: 18px;
    line-height: 18px;
    word-break: break-all;
}
.j-radio-cw,.j-checkbox-cw{
    display: inline-block;
    border: 1px solid #999;
    border-color: #999;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    transition: border-color .3s ease;
    -webkit-transition: border-color .3s ease;
    -o-transition: border-color .3s ease;
    -moz-transition: border-color .3s ease;
    -ms-transition: border-color .3s ease;
}
.j-checkbox-cw{
    border-radius: 2px;
    width: 18px;
    height: 18px;
}
.j-checkbox-cw .j-icon{
    font-size:16px;
}
.j-radio-c{
    width: 0px;
    height: 0px;
    background-color: transparent;
    position: relative;
    display: block;
    top: 9px;
    left: 9px;
    border-radius: 50%;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
}
.j-checkbox-c{
    border-radius: 2px;
    background-color: transparent;
    color: transparent;
    position: relative;
    top: -1px;
    left:-1px;
    background-color: transparent;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    display: block;
}
.j-radio-t,.j-checkbox-t{
    vertical-align: middle;
    font-size: 15px;
    color: #222;
    transition:color .3s ease;
    -webkit-transition:color .3s ease;
    -o-transition:color .3s ease;
    -moz-transition:color .3s ease;
    -ms-transition:color .3s ease;
    margin-left: 2px;    
    word-break: break-all;
}
.j-radio:hover .j-radio-cw,.j-checkbox:hover .j-checkbox-cw{border-color: #5fbcff}
.j-radio:hover .j-radio-t,.j-checkbox:hover .j-checkbox-t{color: #5fbcff}
.j-radio.j-checked .j-radio-cw,.j-checkbox.j-checked .j-checkbox-cw{border-color: #1da1ff}
.j-radio.j-checked .j-radio-t,.j-checkbox.j-checked .j-checkbox-t{color: #1da1ff}
.j-radio.j-checked .j-radio-c{
    background-color: #1da1ff;
    width:12px;
    height:12px;
    top: 3px;
    left: 3px;
}
.j-checkbox.j-checked .j-checkbox-c{
    color: #1da1ff;
}
.j-radio[disabled],.j-checkbox[disabled]{
    cursor: no-drop;
}
.j-radio[disabled] .j-radio-cw,.j-checkbox[disabled] .j-checkbox-cw{
    border-color: #999;
}
.j-radio[disabled] .j-radio-t,.j-checkbox[disabled] .j-checkbox-t{
    color: #999;
}
.j-radio[disabled] .j-radio-c{
    background-color: #999;    
}
.j-checkbox[disabled] .j-checkbox-c{
    color: #999;    
}
.j-checkbox[disabled][checked=false] .j-checkbox-c{
    color: transparent;    
}

/*RADIO END************************************************************************************/
/*SWITCH************************************************************************************/
.j-switch{
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 24px;
    padding: 2px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background-color: #bbb;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    font-size: 13px;
    line-height: 22px;
}
.j-switch.xs{height: 16px;width:34px;border-radius: 8px;font-size: 10px;line-height: 14px;}
.j-switch.s{height: 20px;width:42px;border-radius: 10px;font-size: 12px;line-height: 19px;}
.j-switch.l{height: 28px;width:58px;border-radius: 14px;font-size: 15px;line-height: 27px;}
.j-switch.xl{height: 32px;width:66px;border-radius: 16px;font-size: 17px;line-height: 29px;}
.j-switch.xs .j-switch-c{height:12px;width:12px;}
.j-switch.s .j-switch-c{height:16px;width:16px;}
.j-switch.l .j-switch-c{height:24px;width:24px;}
.j-switch.xl .j-switch-c{height:28px;width:28px;}
.j-switch.xs.j-s-on .j-switch-c{left: 19px;}
.j-switch.s.j-s-on .j-switch-c{left: 23px;}
.j-switch.l.j-s-on .j-switch-c{left: 31px;}
.j-switch.xl.j-s-on .j-switch-c{left: 35px;}
.j-switch:hover{
    border: 1px solid #1da1ff;
}
.j-switch-c{
    position: absolute;
    width: 20px;
    display: inline-block;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    left: 1px;
    top: 1px;
    transition:left .3s ease;
    -webkit-transition:left .3s ease;
    -o-transition:left .3s ease;
    -moz-transition:left .3s ease;
    -ms-transition:left .3s ease;
}
.j-switch-t{
    position: absolute;
    opacity: 0; 
    width: 100%;
    padding: 0 9px 0 4px;
    font-size: inherit;
    transition:opacity .3s ease;
    -webkit-transition:opacity .3s ease;
    -o-transition:opacity .3s ease;
    -moz-transition:opacity .3s ease;
    -ms-transition:opacity .3s ease;
    text-align: left;
    color:#fff; 
    height: 100%;
    top: 0;
    line-height: inherit;
    white-space: nowrap;
}
.j-switch-t.j-st-off{
    opacity: 1;
    text-align: right;
}
.j-switch-t .j-st-on{
    
}
.j-switch-t .j-st-off{
    
}
.j-switch.j-s-on{
    background-color: #1da1ff;
    border: 1px solid #6ca9d4;
}
.j-switch.j-s-on .j-switch-c{
    left: 27px;
}
.j-switch.j-s-on .j-switch-t.j-st-on{
    opacity: 1;
}
.j-switch.j-s-on .j-switch-t.j-st-off{
    opacity: 0;
}
.j-switch[disabled]{
    border:#777;
}
.j-switch[disabled] .j-switch-t{
    color:#999;
}
/*SWITCH END************************************************************************************/

/*DATE************************************************************************************/
.j-date{
    position: relative;
    padding: 0;
    padding-top: 2px;
    line-height: 22px;
}
.j-date[jui-date-time=true]{
    width: 165px;
}
.j-date.xs{
    height: 23px;
    width: 100px;
    padding-top: 0;
}
.j-date.xs[jui-date-time=true]{
    width: 130px;
}
.j-date.s{
    height: 26px;
    width: 120px;
    padding-top: 0;
}
.j-date.s[jui-date-time=true]{
    width: 150px;
}
.j-date.l{
    height: 35px;
    width: 170px;
}
.j-date.l[jui-date-time=true]{
    width: 180px;
}
.j-date.xl{
    height: 40px;
    width: 200px;
}
.j-date.xl[jui-date-time=true]{
    width: 220px;
}
.j-date-v{
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    outline: none;
    position: relative;
    text-align: center;
    cursor: pointer;
    font-size: 16px;    
    background-color: transparent;
}
.j-date-allw{
    z-index: 1;
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    border: 1px solid #aaa;
    background-color: #fff;
    top: 0px;
    opacity: 0;
    border-radius: 2px;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
}
.j-date-today{
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    height: 18px;
    line-height: 16px;
    background-color: #eee;
    border-top: 1px solid #ccc;
    transition:background-color .3s ease;
    -webkit-transition:background-color .3s ease;
    -o-transition:background-color .3s ease;
    -moz-transition:background-color .3s ease;
    -ms-transition:background-color .3s ease;
}
.j-date-today:hover{
    background-color: #ddd;
}
.j-date-w{
}
.j-date.xs .j-date-v{
    font-size: 12px;    
    top: -3px;
}
.j-date.xs .j-date-allw{
    width: 150px;
    left:-25px;
}
.j-date.s .j-date-v{
    font-size: 14px;
}
.j-date.s .j-date-allw{
    width: 150px;
    left:-15px;
}
.j-date.l .j-date-v{
    font-size: 18px;
}
.j-date.l .j-date-allw{
    
}
.j-date.xl .j-date-v{
    font-size: 22px;
    
}
.j-date.xl .j-date-allw{
    
}
.j-date.j-active .j-date-allw{
    top: 35px;
    opacity: 1;
}
.j-date.xs.j-active .j-date-allw{
    top: 28px;
}
.j-date.s.j-active .j-date-allw{
    top: 31px;
}
.j-date.l.j-active .j-date-allw{
    top: 40px;
}
.j-date.xl.j-active .j-date-allw{
    top: 45px;
}
.j-date-t{
    margin: 0;
    border-bottom:1px solid #aaa;
    line-height: 18px;
}
.j-date-ty,.j-date-tm{
    float: left;
    width:50%;
    position: relative;
}
.j-date-ty{

}
.j-date-tm{

}
.j-date-icon{
    position: absolute;
    top: 2px;
    cursor: pointer;
    font-size: 16px;
    color: #000;
}
.j-date-icon:hover{
    color: #1da1ff;
}
.j-date-icon.icon-angle-left{
    left: 0px;
}
.j-date-icon.icon-angle-right{
    right:0;
}
.j-date-input{
    width: 100%;
    text-align: center;
    font-size: 13px;
    outline: none;
    border: none;
}
.j-date-dw{
    padding: 0 2px;
    background-color: #eee;
}
.j-date-di,.j-date-si{
    float: left;
    width: 14.285714285714286%;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}
.j-date-di{
    cursor: auto;
}
.j-date-sw{
    padding: 2px;
}
.j-date-si{
    background-color: transparent;
    color:#222;
    border-radius: 3px;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
}
.j-date-si:hover{
    background-color: #70c4ff;
    color:#fff;
    border-radius: 10px;
}
.j-date-si.j-disabled{
    color:#ddd;
    cursor: no-drop;
}
.j-date-si.j-date-current{
    background-color: #2ac32f;
    color:#fff;
    border-radius: 10px;
}
.j-date-si.j-active{
    background-color: #1da1ff;
    color:#fff;
    border-radius: 10px;
}
.j-date-si.j-disabled:hover{
    background-color: transparent;
    color:#ddd;
    border-radius: 3px;
}

.j-clearfix:after{
    clear:both;
}
.j-clearfix:before, .j-clearfix:after{
    display: table;
    content: " ";
}
.j-date-close{
    position: absolute;
    right: -16px;
    font-size: 15px;
    cursor: pointer;
    top: 2px;
    color: #888;
}
.j-date-close:hover{
    color: #e44;
}
.j-date[disabled] .j-date-v{
    cursor: no-drop!important;
}
.j-time-w{
    display: none;
}
.j-tt-w{
    font-size: 14px;
    text-align: center;
}
.j-tt-info div{
    width:33.33333%;
    float: left;
}

.j-ti-w{
    height:100px;
    width:33.33333%;
    overflow-x: hidden;
    overflow-y: hidden;
    float: left;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-left: none;
}
.j-ti-w:last-child{
    border-right: none;
}
.j-ti-w:hover{
    overflow-y: scroll;
}
.j-ti-w div{
    background-color: transparent;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    font-size: 13px;
}
.j-ti-w div:hover{
    background-color: #b7e1ff;
}
.j-ti-w div.j-active{
    background-color: #1da1ff;
    color: #fff;
}
.j-tb-w{
    text-align: right;
}
.j-date-overflow{
    background-color: #ddd!important;
    color: #888!important;
    border-radius: 0;
}
.j-date-detail{
    height: auto;
    min-height:50px;
    width: 150px;
    position: absolute;
    background-color: #fff;
    top: -1px;
    right: -152px;
    border: 1px solid #aaa;
    font-size: 14px;
    padding: 4px;
    display: none;
    z-index:1;
    text-align: left;
}
.j-date-detail div{
    border-bottom: 1px solid #ccc;
}
.j-date-detail span{
    font-weight: bold;
}
.j-date-detail div:last-child,.j-date-detail div.j-date-no-b{
    border-bottom: none;
}
/*DATE END************************************************************************************/
/*COLOR************************************************************************************/

.j-color{
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
    border: 1px solid #aaaaaa;
    border-radius: 5px;
    text-align: center;
    vertical-align: bottom;
}
.j-color.xs{
    height: 23px;
    width: 23px;
}
.j-color.s{
    height: 26px;
    width: 26px;
}
.j-color.l{
    height: 35px;
    width: 35px;
}
.j-color.xl{
    height: 40px;
    width: 40px;
}
.j-color.j-color-bg-alp{
    background-image: url();
}
.j-color-icon{
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    transition:transform .3s ease;
    -webkit-transition:transform .3s ease;
    -o-transition:transform .3s ease;
    -moz-transition:transform .3s ease;
    -ms-transition:transform .3s ease;
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 30px;
    color:#ddd;
}

.j-color[disabled] .j-color-icon{
    display: none;
}
.j-color.xs .j-color-icon{
    line-height: 23px;
}
.j-color.s .j-color-icon{
    line-height: 26px;
}
.j-color.l .j-color-icon{
    line-height: 35px;
}
.j-color.xl .j-color-icon{
    line-height: 40px;
}
.j-color-bg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
}
.j-color.j-active .j-color-icon{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}
.j-color-w{
    width:220px;
    /* display: none; */
    position: absolute;
    border: 1px solid #999;
    top:0;
    left:-95px;
    opacity: 0;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    background-color: #fff;
    z-index: 1;
}
.j-color.j-active .j-color-w{
    top:32px;
    opacity: 1;
}
.j-color.xs.j-active .j-color-w{
    top:25px;
}
.j-color.s.j-active .j-color-w{
    top:28px;
}
.j-color.l.j-active .j-color-w{
    top:37px;
}
.j-color.xl.j-active .j-color-w{
    top:42px;
}
.j-color-pick:hover{
    cursor: pointer;
}
.j-color-pick{
    background-color: #f00;
    width:200px;
    height:150px;
    position: relative;
}
.j-color-pick-s,.j-color-range-s,.j-color-alp-s{
    position: absolute;
    width:6px;
    height:6px;
    border:1px solid #888;
    background-color: rgba(255,255,255,.7);
}
.j-color-cover1,.j-color-cover2,.j-color-cover-a,.j-color-range-a,.j-color-alp-a,.j-color-alp-color{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.j-color-cover1{
    background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
}
.j-color-cover2{
    background: linear-gradient(0deg,#000,transparent);
}
.j-color-cover-a,.j-color-range-a,.j-color-alp-a{
    background:transparent;
}
.j-color-range{
    position: absolute;
    right:0;
    top:0;
    height:150px;
    width:15px;
    background: linear-gradient(180deg,red 0,#ff0 17%,lime 33%,cyan 50%,blue 67%,#f0f 83%,red);
}
.j-color-range:hover{
    cursor: pointer;
}
.j-color-range-s{
    width:100%;
    height:6px;
}
.j-color-vw{
    height: 26px;
}
.j-color-v{
    margin: 0;
    border: none;
    border-radius: 0;
    font-size: 13px!important;
    text-align: center!important;
    color:#222;    
    vertical-align: top;
    height: 26px;
}
.j-color-v:focus{
    border: none;
}
.j-color-btn{
    float:right;
    margin: 0;
    border-radius:0;
}

.j-color-alp{
    position: relative;
    width: 100%;
    height: 15px;
    margin-top:3px;
    background-image: url();
    cursor: pointer;
}
.j-color-alp-color{    
    background: linear-gradient(to right, rgba(19, 206, 102, 0) 0%, rgb(19, 206, 102) 100%);
}
.j-color-alp-s{
    width:6px;
    height: 15px;
}

/*COLOR END************************************************************************************/

/*SLIDER*********************************************************************/
.j-slider,.j-progress{
    height:6px;
    border-radius: 3px;
    width:150px;
    position: relative;
    background-color: #ddd;
    cursor: pointer;
}
.j-slider-bar,.j-progress-bar{
    width:0%;
    height:100%;
    border-radius: 15px;
    position: relative;
    background-color: #1da1ff;
}
.j-slider-c{
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #1da1ff;
    /* transition:all .3s linear;
    -webkit-transition:all .3s linear;
    -o-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -ms-transition:all .3s linear; */
    cursor: pointer;
}
.j-slider-c,.j-slider[disabled] .j-slider-c:hover{
    right:-7px;
    top:-4px;
    height:14px;
    width:14px;
}
.j-slider-c:hover{
    width:16px;
    height:16px;
    right:-8px;
    top:-5px;
}
.j-slider-t{

}
.j-slider.success .j-slider-bar,.j-progress.success .j-progress-bar{background-color: #2ac32f}
.j-slider.success .j-slider-c{border-color: #2ac32f}
.j-slider.info .j-slider-bar,.j-progress.info .j-progress-bar{background-color: #9e9e9e}
.j-slider.info .j-slider-c{border-color: #9e9e9e}
.j-slider.warn .j-slider-bar,.j-progress.warn .j-progress-bar{background-color: #dfa02b}
.j-slider.warn .j-slider-c{border-color: #dfa02b}
.j-slider.danger .j-slider-bar,.j-progress.danger .j-progress-bar{background-color: #dc5454}
.j-slider.danger .j-slider-c{border-color: #dc5454}
    /*PROGRESS*********************************************************************/
.j-progress-bar{
    transition:width .3s linear;
    -webkit-transition:width .3s linear;
    -o-transition:width .3s linear;
    -moz-transition:width .3s linear;
    -ms-transition:width .3s linear;
}
.j-progress{
    cursor: default;
    width:100%;
}
    /*PROGRESS END*********************************************************************/

.j-slider.xs,.j-progress.xs{
    height:2px;
    border-radius: 1px;
}
.j-slider.xs .j-slider-c,.j-slider[disabled].xs .j-slider-c:hover{
    right:-4px;
    top:-3px;
    height:8px;
    width:8px;
    border-width: 1px;
}
.j-slider.xs .j-slider-c:hover{
    width:10px;
    height:10px;
    right:-5px;
    top:-4px;
}
.j-slider.s,.j-progress.s{
    height:4px;
    border-radius: 2px;
}
.j-slider.s .j-slider-c,.j-slider[disabled].s .j-slider-c:hover{
    right:-6px;
    top:-4px;
    height:12px;
    width:12px;
}
.j-slider.s .j-slider-c:hover{
    width:14px;
    height:14px;
    right:-7px;
    top:-5px;
}
.j-slider.l,.j-progress.l{
    height:10px;
    border-radius: 5px;
}
.j-slider.l .j-slider-c,.j-slider[disabled].l .j-slider-c:hover{
    right:-9px;
    top:-5px;
    height:18px;
    width:18px;
}
.j-slider.l .j-slider-c:hover{
    width:20px;
    height:20px;
    right:-10px;
    top:-6px;
}
.j-slider.xl,.j-progress.xl{
    height:14px;
    border-radius: 7px;
}
.j-slider.xl .j-slider-c,.j-slider[disabled].xl .j-slider-c:hover{
    right:-12px;
    top:-6px;
    width:24px;
    height:24px;
    border-width: 3px;
}
.j-slider.xl .j-slider-c:hover{
    width:26px;
    height:26px;
    right:-13px;
    top:-7px;
}
.j-slider[disabled]{
    cursor: no-drop;
    background-color: #ddd;
}
.j-slider[disabled] .j-slider-bar{
    background-color: #aaa;
}
.j-slider[disabled] .j-slider-c{
    cursor: no-drop;
    border-color: #aaa;
}
/*SLIDER END*********************************************************************/




/*CODE*/
.j-code {
    width: 300px;
    height: 200px;
    border: 1px solid #ddd;
    display: inline-block;
    position: relative;
    white-space: pre;
    border-radius: 5px;
    overflow: hidden!important;
    font-size: 16px;
    line-height: 20px;
    min-width: 245px!important;
    text-align: left!important;
    text-indent: 0;
    background-color: rgba(240,240,240,.95);
}
.j-code,.j-code *{
    box-sizing:border-box;
}
.j-code *::-webkit-scrollbar {
    width:5px;
    cursor: pointer;
    height: 5px;
}
.j-code *::-webkit-scrollbar-button    {
    display: none;
}
.j-code *::-webkit-scrollbar-track     {
    display: none;
}
.j-code *::-webkit-scrollbar-track-piece {
    background-color:#ddd;
}
.j-code.j-c-dark *::-webkit-scrollbar-track-piece {
    background-color:#ddd;
}
.j-code *::-webkit-scrollbar-thumb{
    background-color:#ccc;
    border-radius:5px;
    cursor: pointer;
}
.j-code *::-webkit-scrollbar-thumb:hover{
    background-color:#bbb;
    cursor: pointer;
}
.j-code.j-c-dark *::-webkit-scrollbar-track-piece {
    background-color:#666;
}
.j-code.j-c-dark *::-webkit-scrollbar-thumb{
    background-color:#999;
}

.j-code.j-c-dark {
    background-color: rgba(20,20,20,.95);
    border: 1px solid rgba(255,255,255,.5);
}

.j-code.j_full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    border: 0;
    border-radius: 0;
    z-index: 10000;
}
.j-code.j_full .code_editor, .j-code.j_full .code_editor_view{
    min-height: 100%!important;
    width: 100%!important;
}

.j_hidden {
    overflow: hidden!important
}

.code_editor,.code_editor_view {
    width: 100%;
    background-color: transparent;
    font-size: inherit;
    padding: 10px;
    line-height: inherit;
    font-family: Consolas, 'Courier New', monospace;
    overflow: auto;
    position: absolute;
    white-space: pre;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    word-break: break-all;
    word-wrap: normal;
    margin: 0;
    min-width: 245px;
    padding-left:35px;
}

.j-code[jui-code-line=false] .code_editor,.j-code[jui-code-line=false] .code_editor_view{
    padding-left: 10px!important;
}
.code_line_w{
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0px;
    padding-top:10px;
    height: 100%;
    text-align: center;
    width: 30px;
    font-size: 12px;
    line-height: 20px;
    border-right: 1px solid #ccc;
    color: #aaa;
    background-color: #eee;
}
.j_full .code_line_w{
    min-height: 100%;
    height: auto;
}
.j-c-dark .code_line_w{
    background-color: #444;
    color: #ddd;
    border-right: 1px solid #666;
}
.j-code[buttons] .code_line_w{
    padding-top: 40px;
}
.code_line_w div{
    font-weight: normal;
    transition: all .3s ease;
    position:relative;
    left:0;
    -webkit-transition: all .3s ease;
}
.code_line_w div.j-active{
    color: #444;
    left: -3px;
    font-weight: bold;
}
.j-c-dark .code_line_w div.j-active{
    color: #fff;
}
.code_active_line{
    width: 100%;
    height: 20px;
    position: absolute;
    background-color: #ddd;
    top: 10px;
    opacity:0;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease;
}
.j-c-dark .code_active_line{
    background-color: #333;
}
.j-code[buttons] .code_active_line{
    top: 40px;
}
.code_set_w {
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    border-radius: 5px 5px 0 0;
    background-color: #bbb;
    border-bottom: 1px solid #ddd;
    text-align: right;
    padding-right: 5px;
    white-space: normal;
    padding-top: 1px;
    z-index: 1;
}

.code_set_w .j-icon {
    margin: 5px 3px;
    cursor: pointer;
    color: #444;
    font-size: 18px;
    vertical-align: text-top;
    display: inline-block;
}

.j-c-dark .code_set_w{
    border-bottom: 1px solid #aaa;
    background-color: #666;
}
.j-c-dark .code_set_w .j-icon{
    color: #fff;
}

.code_editor_view {
    background-color: transparent;
    color: transparent;
}

.code_editor_view._bottom {
    color: rgb(0,16,144);
}
.j-c-dark .code_editor_view._bottom {
    color: rgb(103,205,254);
}


.code_editor {
    position: relative;
    color: transparent;
    border-color: transparent;
    transition: background-color .3s;
    -o-transition: background-color .3s;
    -moz-transition: background-color .3s;
    -webkit-transition: background-color .3s;
    resize: none;
    caret-color: #444;
}
.j-c-dark .code_editor{
    caret-color: #ddd;
}

.code_editor.bg {    background-color: rgba(20,20,20,.9)}
cd_tag,cd_tag * {color: rgb(128,0,82)}
cd_str,cd_str * {color: rgb(209,74,71)!important}
cd_note,cd_note * {color: rgb(106,153,85)!important}
cd_attr{color: rgb(0,16,144);}
cd_attr_equal{color: #666;}
cd_attr_punc{color: rgb(128,0,0);}
cd_html_c{color: rgb(128,0,0);}

.j-c-dark cd_tag,.j-c-dark cd_tag * {color: rgb(62,156,214)}
.j-c-dark cd_str,.j-c-dark cd_str * {color: rgb(199,141,117)!important}
.j-c-dark cd_attr{color: rgb(156, 220,254);}
.j-c-dark cd_attr_equal{color: #ddd;}
.j-c-dark cd_attr_punc{color: rgb(128,128,128);}
.j-c-dark cd_html_c{color: rgb(128,0,0);}
.j-c-dark cd_note,.j-c-dark cd_note{color: #6a8a35;}

.j-c-js-punc{
    color: #666;
}

.j-c-js-k1{
    color: #00f;
}
.j-c-js-k2{
    color: #af00db;
}
.j-c-js-k3{
    color: #267f99;
}
.j-c-js-cm,.j-c-js-cm *{
    /*color: #008084;*/
    color:rgb(106,153,85)
}
.j-c-js-str,.j-c-js-str *{
    color: #d14a47;
}
.j-c-js-num{
    color: #09885a;
}
.j-c-js-f{
    color: #b27878;
}
.j-c-js-reg{
    color: #f00;
}

.j-c-dark .j-c-js-punc{
    color: #ddd;
}

.j-c-dark .j-c-js-k1{
    color: #569cd6;
}
.j-c-dark .j-c-js-k2{
    color: #c586c0;
}
.j-c-dark .j-c-js-k3{
    color: #3ac9b0;
}
.j-c-dark .j-c-js-cm,.j-c-dark .j-c-js-cm *{
    color: #6a8a35;
}
.j-c-dark .j-c-js-str,.j-c-dark .j-c-js-str *{
    color: #ce9178;
}
.j-c-dark .j-c-js-num{
    color: #b5cea8;
}
.j-c-dark .j-c-js-f{
    color: #dcdcaa;
}
.j-c-dark .j-c-js-reg{
    color: #d16969;
}
.j-c-dark .j-c-editor-cline{
    border-color: #444;
    background-color: rgba(100,100,100,.1);
}
.j-c-dark .j-c-editor-cbtn{
    background-color: rgba(68,68,68,.9);
    border-color:#fff;
    box-shadow:0px 0px 10px 2px #ccc;
}
.j-c-dark .j-c-ed-lines div{
    background-color:#444;
}

/*CODE END*/

/*CONFIRM************************************************************/
.j-confirm{
	width: 300px;
    height: 180px;
	position: fixed;
	left: 50%;
	top: 50%;
	opacity: 0!important;
    margin-top: -90px;
    margin-left:  -150px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: #ddd 1px 1px 10px 2px;
	padding: 15px;
    z-index: 30;
    border: 2px solid #ccc;
    cursor: move;

	opacity: 1!important;
	animation: j-confirm-show .5s ease;
	-moz-animation: j-confirm-show .5s ease;
	-webkit-animation: j-confirm-show .5s ease;
	-o-animation: j-confirm-show .5s ease
    
}
.j-confirm-t{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 7px;
    color: #444;
    overflow: hidden;
    height: 22px;
    width: 250px;
}
.j-confirm-t.success{
    color: #2ac32f;
}
.j-confirm-t.warn{
    color: #dfa02b;
}
.j-confirm-t.error{
    color: #dc5454;
}
.j-confirm-t.info{
    color: #9e9e9e;
}
.j-confirm-t .j-icon{
    font-size: 16px;
    margin-right: 5px;
}
.j-confirm-c{
    font-size: 16px;
    color: #666;
    word-wrap: break-word;
    max-height: 90px;
    overflow-y: auto;
}
.j-confirm-close{
    position: absolute;
    right:15px;
    top:15px;
    font-size: 20px;
    color: #888;
    cursor: pointer;
	transition: color .3s ease;
	-moz-transition: color .3s ease;
	-webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
}
.j-confirm-close:hover{
    color: #f44;
}
.j-confirm-bw{
    position: absolute;
    bottom:15px;
    width:270px;
    text-align: right;
}

.j-confirm.j-confirm-hide{
	transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	animation: j-confirm-hide .5s ease;
	-moz-animation: j-confirm-hide .5s ease;
	-webkit-animation: j-confirm-hide .5s ease;
	-o-animation: j-confirm-hide .5s ease
}

@keyframes j-confirm-show {
	0% {
		transform: scale(0);
		top: 20%
	}

	50% {
		transform: scale(1.2);
		top: 50%
	}

	100% {
		transform: scale(1);
		top: 50%
	}
}

@-moz-keyframes j-confirm-show {
	0% {
		-moz-transform: scale(0);
		top: 20%
	}

	50% {
		-moz-transform: scale(1.2);
		top: 50%
	}

	100% {
		-moz-transform: scale(1);
		top: 50%
	}
}

@-webkit-keyframes j-confirm-show {
	0% {
		-webkit-transform: scale(0);
		top: 20%
	}

	50% {
		-webkit-transform: scale(1.2);
		top: 50%
	}

	100% {
		-webkit-transform: scale(1);
		top: 50%
	}
}

@-o-keyframes j-confirm-show {
	0% {
		-o-transform: scale(0);
		top: 20%
	}

	50% {
		-o-transform: scale(1.2);
		top: 50%
	}

	100% {
		-o-transform: scale(1);
		top: 50%
	}
}

@keyframes j-confirm-hide {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.2)
	}

	100% {
		transform: scale(0)
	}
}

@-moz-keyframes j-confirm-hide {
	0% {
		-moz-transform: scale(1)
	}

	50% {
		-moz-transform: scale(1.2)
	}

	100% {
		-moz-transform: scale(0)
	}
}

@-webkit-keyframes j-confirm-hide {
	0% {
		-webkit-transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.2)
	}

	100% {
		-webkit-transform: scale(0)
	}
}

@-o-keyframes j-confirm-hide {
	0% {
		-o-transform: scale(1)
	}

	50% {
		-o-transform: scale(1.2)
	}

	100% {
		-o-transform: scale(0)
	}
}

@keyframes j-dialog-show {
	0% {transform: scale(0);}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

@-moz-keyframes j-dialog-show {
	0% {
		-moz-transform: scale(0);
	}

	50% {
		-moz-transform: scale(1.2);
	}

	100% {
		-moz-transform: scale(1);
	}
}

@-webkit-keyframes j-dialog-show {
	0% {
		-webkit-transform: scale(0);
	}

	50% {
		-webkit-transform: scale(1.2);
	}

	100% {
		-webkit-transform: scale(1);
	}
}

@-o-keyframes j-dialog-show {
	0% {
		-o-transform: scale(0);
	}

	50% {
		-o-transform: scale(1.2);
	}

	100% {
		-o-transform: scale(1);
	}
}


/*CONFIRM END*****************************/

/*DIALOG*****************************/
.j-dialog{
    position: fixed;
    z-index:20;
    width:600px;
    margin-left:-300px;
    margin-top:-150px;
    left:50%;
    top:50%;
    background-color: #eee;
    padding-top:30px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 0px #aaa;
    
    
	transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
}
.j-dialog.xs{
    width:180px;
    margin-left:-90px;
}
.j-dialog.s{
    width:320px;
    margin-left:-160px;
}
.j-dialog.l{
    width:900px;
    margin-left:-450px;
}
.j-dialog.xl{
    width:1200px;
    margin-left:-600px;
}
.j-dialog.full{
    width:100%;
    height:100%;
    margin-left:0;
    margin-top:0;
    left:0;
    top:0;
}
.j-dialog.j-dialog-open{
    
    top:50%;
	transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	animation: j-dialog-show .5s ease;
	-moz-animation: j-dialog-show .5s ease;
	-webkit-animation: j-dialog-show .5s ease;
	-o-animation: j-dialog-show .5s ease
}
.j-dialog-title{
    position: absolute;
    left: 10px;
    font-size: 15px;
    font-weight: bold;
}
.j-dialog.j-dialog-close{
	animation: j-confirm-hide .5s ease;
	-moz-animation: j-confirm-hide .5s ease;
	-webkit-animation: j-confirm-hide .5s ease;
	-o-animation: j-confirm-hide .5s ease
}
.j-dialog-head{
    border-radius: 5px 5px 0 0 ;
    cursor: move;
    position: absolute;
    top:0;
    left:0;
    height:30px;
    width:100%;
    text-align: right;
    padding: 2px 4px;
    border-bottom: 1px solid #ddd;
}
.j-dialog-head .icon-times{
    font-size: 25px;
    cursor: pointer;
    color:#444;
	transition: color .3s ease;
	-moz-transition: color .3s ease;
	-webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
}
.j-dialog-head .icon-times:hover{
    color:#a44;
}
.j-dialog-body{
    max-height:500px;
    min-height:300px;
    overflow:auto;
    padding: 10px;
    width:100%;
    height: 100%;
}
.j-dialog.xs .j-dialog-body{
    max-height:120px;
    min-height:100px;
}
.j-dialog.s .j-dialog-body{
    max-height:300px;
    min-height:210px;
}
.j-dialog.l .j-dialog-body{
    max-height:750px;
    min-height:390px;
}
.j-dialog.xl .j-dialog-body{
    max-height:800px;
    min-height:500px;
}
.j-dialog.full .j-dialog-body{
    height: 100%;
    max-height: none;
}

.j-drag{
    position: fixed;
    z-index:20;
    width:500px;
    height:300px;
    margin-left:-50px;
    margin-top:-50px;
    left:50%;
    top:50%;
    background-color: #eee;
    box-shadow: 0px 0px 20px 0px #aaa;
}
.j-drag-area{
    cursor: move;
}
/*DIALOG END*****************************/

/*page*/
.j-page{
    width: 100%;
    text-align: center;
    margin: 3px;
}
.j-page .j-input{
    width:40px;
}
.j-page-text{
    font-size:16px;
    margin:0 10px;
    vertical-align: middle;
}
.j-tab{
    margin: 3px;
}
.j-tab-head{
    width:100%;
    height: 28px;
}
.j-tab-head > span{
    position: relative;
    z-index: 1;
    padding: 4px 8px;
    margin: 0;
    font-size: 16px;
    border: 1px solid #aaa;
    cursor: pointer;
    background-color: #f0f0f0;
    border-right:none;
	transition: background-color .3s ease;
	-moz-transition: background-color .3s ease;
	-webkit-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
}
.j-tab-head > span:hover{
    background-color: #ddd;
}
.j-tab-head > span:last-child{
    border-right:1px solid #aaa;
}
.j-tab-head > span.j-tab-active{
    background-color: #ccc;
    border-bottom-color: #ccc;
}
.j-tab-body{
    margin: 3px;
    width:100%;
    margin: 0;
    padding: 0;
    min-height: 400px;
    border: 1px solid #aaa;
    position: relative;
    background-color: #f0f0f0;
}
.j-tab-item{
    position: absolute;
    display: none;
    width: 100%;
    padding: 10px;
}
.j-tab-item.j-tab-active{
    display: block;
}
/*page end*/
@media screen and (max-width: 620px) {
    .j-msg-w{
        width:94%;
        font-size: 12px!important;
        left: 3%;
        margin-left: 0px;

    }
    .j-dialog{
        width:94%;
        left: 3%;
        margin-left: 0px;
    }
}